<!-- picker 胡欢 -->
<template>
  <view style="height: 100%; width: 100%">
    <!-- 外层显示 -->
    <view class="picker-hierarchy" @click="toggle" style="height: 100%">
      <view
        class="picker-text"
        :class="setTextStyle ? 'picker-text-state' : ''"
      >
        {{ valuePlaceholder }}
      </view>
      <img
        class="picker-icon"
        src="../pages/static/image/picker-icon.png"
        mode=""
      />
    </view>
    <!-- 弹出框 -->
    <uni-popup ref="popup" background-color="transparent">
      <view class="picker">
        <view class="picker-header">
          <view class="picker-header-cancel" @click="$refs.popup.close()">
            取消
          </view>
          <view class="picker-header-title">
            {{ title }}
          </view>
          <view class="picker-header-confirm" @click="confirm"> 确认 </view>
        </view>
        <view class="popup-content">
          <picker-view
            v-if="visible"
            :indicatorStyle="indicatorStyle"
            :immediate-change="true"
            class="picker-view"
            :value="value"
            @change="change"
          >
            <picker-view-column>
              <view
                v-for="(item, index) in pickerList"
                class="item"
                :key="index"
              >
                {{ keys ? item[label] : item }}
              </view>
            </picker-view-column>
          </picker-view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>
<script>
export default {
  props: {
    dataSet: {
      type: Array,
      default: () => [],
    },
    type: {
      // picker类型暂支持单列
      type: String,
      default: "text",
    },
    label: {
      // dataSet为Array＜Object＞对象时的label
      type: String,
      default: "text",
    },
    keys: {
      // dataSet为Array＜Object＞对象时的keys
      type: String,
      default: null,
    },
    index: {
      // 默认选中
      type: Array,
      default: () => [],
    },
    title: {
      // picker标题
      type: String,
      default: "",
    },
    placeholder: {
      // 默认显示提示语
      type: String,
      default: "",
    },
    defaultValue: {
      // 默认值
      type: String,
      default: "",
    },
  },
  data() {
    return {
      pickerList: [],
      visible: true,
      value: [0],
      indicatorStyle: `height: 50rpx;`,
      valuePlaceholder: "请选择",
    };
  },
  computed: {
    /**
     * 显示style判断
     */
    setTextStyle() {
      if (this.placeholder) {
        return this.valuePlaceholder !== this.placeholder;
      }
      return this.valuePlaceholder !== "请选择";
    },
  },
  /**
   * 初始化
   */
  created() {
    if (this.dataSet.length) this.pickerList = this.dataSet;
    if (this.index.length) {
      const [num] = this.index;
      this.value = this.index;
      this.valuePlaceholder = this.keys
        ? this.pickerList[this.value[0]][this.label]
        : this.pickerList[this.value[0]];
      this.visible = false;
      this.$set(this.value, 0, num);
      setTimeout(() => {
        this.visible = true;
      });
    }
    if (this.placeholder) this.valuePlaceholder = this.placeholder;
  },
  methods: {
    /**
     * 选项发生变化回调
     * @param {Object} e
     */
    change(e) {
      this.value = e.detail.value;
    },
    /**
     * 调起弹出框
     */
    toggle() {
      // open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
      this.$refs.popup.open("bottom");
    },
    /**
     * 点击确认等处理
     */
    confirm() {
      this.$refs.popup.close();
      if (this.type === "text") {
        const [idx] = this.value;
        this.valuePlaceholder = this.keys
          ? this.pickerList[idx][this.label]
          : this.pickerList[idx];
        this.$emit(
          "change",
          this.keys
            ? {
                indexs: this.value,
                Selected: this.pickerList[idx],
              }
            : this.valuePlaceholder
        );
      }
    },
  },
};
</script>
<style lang="scss">
.picker-hierarchy {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  .picker-icon {
    width: 40rpx;
    height: 40rpx;
  }
  .picker-text {
    font-size: 28rpx;
  }
  .picker-text-state {
    color: black !important;
    font-size: 28rpx;
  }
}

.picker {
  background: white;
  border-radius: 32rpx 32rpx 0rpx 0rpx;

  .picker-header {
    display: flex;
    justify-content: space-between;
    height: 88rpx;
    padding: 0 72rpx;
    border-bottom: 1px solid #808080;
    font-size: 28rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    cursor: pointer;
    view {
      line-height: 88rpx;
    }
    .picker-header-title {
      font-weight: 400;
    }

    .picker-header-confirm {
      color: #02b494;
    }
  }
}

.picker-view {
  width: 750rpx;
  height: 600rpx;
  margin-top: 20rpx;
}

.item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 72rpx;
  opacity: 1;
  // border: 1rpx solid #808080;
  text-align: center;
  font-size: 28rpx;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #000000;
}
</style>
